<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动Alert示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>

      .floating-alert {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        min-width: 300px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container mt-5">
      <button id="showAlertBtn" class="btn btn-primary">显示浮动Alert</button>
    </div>
    <ul>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
      <li>浮动Alert示例</li>
    </ul>

    <div id="alertContainer"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      document
        .getElementById('showAlertBtn')
        .addEventListener('click', function () {
          const alertHtml = `
                <div class="floating-alert alert alert-warning alert-dismissible fade show" role="alert">
                    <strong>系统提示</strong> 这是模拟原生alert的浮动提示
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;

          document
            .getElementById('alertContainer')
            .innerHTML = alertHtml;

          // 自动消失（可选）
          setTimeout(() => {
            const alert = document.querySelector('.floating-alert');
            if (alert) {
              const bsAlert = new bootstrap.Alert(alert);
              bsAlert.close();
            }
          }, 3000);
        });
    </script>
  </body>
</html>